import React from 'react'
import { Route, NavLink } from 'react-router-dom'
import About from './components/About'
import Home from './components/Home'
import Header from './pages/Header'
import MyNavLink from './components/MyNavLink'
import { Redirect, Switch } from 'react-router-dom/cjs/react-router-dom.min'

// 创建组件
class App extends React.Component {
  render() {
    return (
      <div>
        <div>
          <Header></Header>
          <div className="row">
            <div className="col-xs-2 col-xs-offset-2">
              <div className="list-group">
                {/* 传统H5是通过a标签跳转 */}
                {/* <a className="list-group-item active" href="./about.html">About</a>
                <a className="list-group-item" href="./home.html">Home</a> */}
                {/* react-router-dom中靠路由连接实现切换组件---编写路由链接*/}
                <MyNavLink to='/home'>Home</MyNavLink>
                {/* 此时由于没有/aaaa的注册路由，所以会匹配redirect的路由中 */}
                <MyNavLink to='/about'>About</MyNavLink>
              </div>
            </div>
            <div className="col-xs-6">
              <div className="panel">
                <div className="panel-body">
                  {/* path是路径，component是对应的组件 */}
                  <Switch>
                    <Route  path='/home' component={Home} />
                    <Route  path='/about' component={About} />
                   
                  </Switch>


                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
// 默认暴露
export default App